<template>
	<view class="onliBox">
		<QHzujian></QHzujian>
		<KNyue></KNyue>
		<view class="money">
			<view class="feature">
				<text class="text1">退款金额</text>
				<text class="text2">全部</text>
			</view>
			<view class="quantity">
				<input @focus="change" @blur="change" :class="{active:istive}" type="number" placeholder-class="phcolor"
					placeholder="请输入退款金额" class="input">
			</view>
		</view>
		<view class="explain">
			<text class="text1">退款金额将原路返回到您的账户，如需要退款至银行卡或</text>
			<text> 现金，请至1楼大厅窗口办理</text>
		</view>
		<view class="affirm" @click="goHome">确认退款</view>
	</view>
</template>

<script setup>
	import QHzujian from '~@/components/feng/QHzujian/QHzujian.vue'
	import KNyue from '~@/components/feng/KNyue/KNyue.vue'
	import {
		ref
	} from 'vue'
	const goHome = () => {
		uni.showModal({
			content: '确定退款至您的账户吗？',
			cancelText: '否',
			confirmText: '是',
			success(res) {
				if (res.confirm) {
					uni.showToast({
							title: '退款成功',
							icon: 'success',
							duration: 2000,
						}),
						setTimeout(function() {
							uni.switchTab({
								url: '/pages/home/index/index'
							})

						}, 2000)

				} else if (res.cancel) {
					uni.showToast({
						title: '已取消',
						icon: 'none',
						duration: 2000
					})
				}
			}
		})

	}
	let istive = ref(false)
	const change = () => {
		istive.value = !istive.value
	}
</script>

<style lang="scss">
	.onliBox {
		padding-top: 30rpx;
		margin: 0 36rpx;

		.affirm {
			height: 80rpx;
			background-color: #006eff;
			color: #fff;
			font-size: 30rpx;
			line-height: 80rpx;
			text-align: center;
			margin: 50rpx 20rpx;
		}

		.explain {
			color: #bbbebe;
			font-size: 23rpx;
			display: flex;
			flex-direction: column;
			height: 120rpx;
			justify-content: center;
			padding-left: 20rpx;
			margin: 20rpx 20rpx;
			background-color: #f2f2f2;

			.text1 {
				margin-bottom: 10rpx;
			}
		}

		.money {
			border: 1px solid #f2f2f2;
			margin-top: 30rpx;
			height: 200rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;


			.feature {
				display: flex;
				flex-direction: row;
				justify-content: space-between;


				.text1 {
					margin-left: 20rpx;
				}

				.text2 {
					margin-right: 20rpx;
					color: #006eff;
				}
			}

			.quantity {
				// border: 1px solid red;
				margin: 0 20rpx;
				padding-bottom: 20rpx;
				z-index: -1;

				.input {
					height: 80rpx;
					background-color: #f2f2f2;
					padding: 0 20rpx;

				}

				.phcolor {
					color: #dfdfdf;
				}

				.active {
					border: 1px solid #006eff;
					background-color: #f3f8ff;
				}
			}
		}
	}
</style>
